import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Toast } from 'antd-mobile'
import image from './img/image.png'
import { Avatar } from 'antd';
import style from './index.module.css'
import Nabar from '@/conpoment/Nabar';

interface UserInfo {
    name: string
    idType: string
    idNumber: string
}

function Index() {
    const nav = useNavigate()
    const [isScanning, setIsScanning] = useState(false)
    const [showBlinkInstruction, setShowBlinkInstruction] = useState(false)
    const [showMask, setShowMask] = useState(false)
    const [isVerifying, setIsVerifying] = useState(false)
    const [verificationResult, setVerificationResult] = useState<'success' | 'failed' | null>(null)
    const [userInfo] = useState<UserInfo>({
        name: '王小柯',
        idType: '居民身份证',
        idNumber: '5051************223'
    })
    // 开始人脸识别认证
    const handleStartVerification = () => {
        setIsVerifying(true)
        setShowMask(true)
        setIsScanning(true)
        setVerificationResult(null)
        // 模拟人脸识别过程
        setTimeout(() => {
            setShowBlinkInstruction(false)
            // 模拟识别结果
            const isSuccess = Math.random() > 0.3 // 70% 成功率
            setVerificationResult(isSuccess ? 'success' : 'failed')
                // 立即跳转到家庭管理页面
                nav('/family_management')
        }, 5000)
    }
    // 重置验证状态
    const resetVerification = () => {
        setIsVerifying(false)
        setShowMask(false)
        setIsScanning(false)
        setShowBlinkInstruction(false)
        setVerificationResult(null)
    }
    // 重新开始认证
    const handleRetry = () => {
        resetVerification()
        handleStartVerification()
    }
    return (
        <div className={style.page}>
            {/* 遮罩层 */}
            {showMask && (
                <div className={style.maskOverlay}>
                    <div className={style.maskContent}>
                        {/* 人脸识别框 */}
                        <div className={style.faceFrame}>
                            {verificationResult === 'success' ? (
                                <div className={style.successOverlay}>
                                    <div className={style.successIcon}>✓</div>
                                    <div className={style.successText}>验证成功</div>
                                </div>
                            ) : verificationResult === 'failed' ? (
                                <div className={style.failedOverlay}>
                                    <div className={style.failedIcon}>✗</div>
                                    <div className={style.failedText}>验证失败</div>
                                </div>
                            ) : showBlinkInstruction ? (
                                <div className={style.blinkOverlay}>
                                    <div style={{margin:"10px"}}>
                                        <Avatar size={164} src={image} />
                                    </div>
                                    <div className={style.blinkText}>请眨一眨眼</div>
                                </div>
                            ) : (
                                <div className={style.scanningArea}>
                                    <div className={style.scanningLine}></div>
                                    <div className={style.scanningText}>正在识别中...</div>
                                </div>
                            )}
                        </div>
                        {/* 操作按钮 */}
                        {verificationResult === 'failed' && (
                            <div className={style.actionButtons}>
                                <Button 
                                    color='primary' 
                                    size='large'
                                    onClick={handleRetry}
                                    className={style.retryButton}
                                >
                                    重新验证
                                </Button>
                                <Button 
                                    color='default' 
                                    size='large'
                                    onClick={resetVerification}
                                    className={style.cancelButton}
                                >
                                    取消
                                </Button>
                            </div>
                        )}
                    </div>
                </div>
            )}
            {/* 导航栏 */}
            <div className={style.navbar}>
             <Nabar title='实名认证' sticky={false} />
            </div>
            {/* 主要内容区域 */}
            <div className={style.content}>
                {/* 人脸识别区域 */}
                <div className={style.faceRecognitionArea}>
                    <div className={style.faceIcon}>
                        <img src={image} alt="" />
                    </div>
                    <div className={style.instruction}>
                        请确保正脸出现在取景框中,以便识别
                    </div>
                </div>
                {/* 个人信息显示 */}
                <div className={style.personalInfo}>
                    <div className={style.infoRow}>
                        <span className={style.infoLabel}>姓名</span>
                        <span className={style.infoValue}>{userInfo.name}</span>
                    </div>
                    <div className={style.infoRow}>
                        <span className={style.infoLabel}>证件类型</span>
                        <span className={style.infoValue}>{userInfo.idType}</span>
                    </div>
                    <div className={style.infoRow}>
                        <span className={style.infoLabel}>证件号</span>
                        <span className={style.infoValue}>{userInfo.idNumber}</span>
                    </div>
                </div>
                {/* 开始认证按钮 */}
                <div className={style.buttonArea}>
                    <Button
                        block
                        color='primary'
                        className={style.verifyButton}
                        loading={isScanning}
                        onClick={handleStartVerification}
                        disabled={isVerifying}
                    >
                        {isScanning ? '正在识别中...' : '开始认证'}
                    </Button>
                </div>
            </div>
            {/* 底部技术支持信息 */}
            <div className={style.footer}>
                人脸识别由土豆炖排骨平台提供技术支持
            </div>
        </div>
    )
}
export default Index